<template>
	<view class="container">
		<carHeader>
			<slot>
				<uni-nav-bar color="white" :border="false" background-color="rgba(255,255,255,0.0)" left-icon="chat"
					:title="'首 页'"></uni-nav-bar>
			</slot>
		</carHeader>
		<view class="headsearch">
			<div class="custom-input-wrapper">

				<image @click="handleClickIcon" class="custom-prepend-icon" src="/static/车联网服务-00首页_slices/定位2.png"
					mode="aspectFit"></image>
				<input type="text" placeholder="请输入内容" style="width: 60%;margin-left: 16rpx;" v-model="nowName" />
				<image class="custom-append-icon" src="/static/车联网服务-00首页_slices/刷新 (1).png" mode="aspectFit"
					@click="reflush"></image>
				<text>刷新</text>
			</div>

		</view>

		<view class="btns">

			<view class="btn" @click="repair">
				<view class="cars1">
					<image src="/static/车联网服务-00首页_slices/车辆维修1-01.png"></image>
				</view>
				<text>车辆维修</text>
			</view>
			<view class="btn" @click="maintenance">
				<view class="cars2">
					<image src="../../static/车联网服务-00首页_slices/保养.png"></image>
				</view>
				<text>汽车保养</text>
			</view>
			<view class="btn" @click="watch">
				<view class="cars3">
					<image src="../../static/车联网服务-00首页_slices/洗车.png"></image>
				</view>
				<text>专业洗车</text>
			</view>
			<view class="btn" @click="comeon">
				<view class="cars4">
					<image src="/static/车联网服务-00首页_slices/加油枪 (1).png"></image>
				</view>
				<text>就近加油</text>
			</view>
		</view>

		<view class="map">
			<view class="title">
				<view class="title1">
					<h3>附近加油站</h3>
				</view>
				<view class="title2">根据您的位置推荐最近的加油站</view>
				<view class="more">更多></view>
			</view>

			<view class="littleMap">
				<map style="width: 90%; height: 200px; padding-left: 5%;" 
				:latitude="latitude" :longitude="longitude" :markers="covers">
				</map>
			</view>

		</view>

		<view class="group">
			<view class="title">
				<view class="title1">
					<h3>优惠团购</h3>
				</view>
				<view class="title2">钜惠来袭 为您的爱车续航</view>
				<view class="more" @click="tuanGouMore">更多></view>
			</view>
			<view class="all1">
				<view v-for=" item of groupList" class="all">
					<view class="tuangou" @click="tuangouDetail">
						<view class="imgInfo">
							<image src="/static/车联网服务-00首页_slices/图层 1@3x.png"></image>
						</view>
						<view class="info">
							<text space="nbsp">
								汽车惠民活动走进...
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="null">

		</view>
		<view class="bottom">

			<view class="two">
				<view class="leftImg" >
					<image src="/static/车联网服务-00首页_slices/首页.png"></image>
				</view>
				<view class="centerImg" @click="shijing">
					<image src="/static/车联网服务-00首页_slices/示警.png"></image>
				</view>
				<view class="rightImg" @click="my">
					<image src="/static/车联网服务-00首页_slices/我的-我的.png"></image>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				nowName: '',
				groupList: 4,
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '/static/车联网服务-00首页_slices/定位2.png'
				}, {
					latitude: 39.90,
					longitude: 116.39,
					iconPath: '/static/车联网服务-00首页_slices/定位2.png'
				}]
			}
		},
		onLoad(options) {
			this.nowCity();
			console.log(options); // 查看options对象的内容  
			let name = decodeURIComponent(options.nowName);
			if (name != null) {
				console.log(name);
				this.nowName = name;
			} 			
			let token = uni.getStorage('token');
			console.log("获取到了token");
			console.log(token);
			console.log("获取当前定位哦");
			//获取当前定位
				uni.getLocation({
				type: 'gcj02',  // gcj02 返回国测局坐标				
				success: function(res) {
					console.log("获取当前定位的成功回调函数");
				console.log(res);				
				// this.latitude = res.latitude;				
				// this.longitude = res.longitude;				
				},
				fail(res) {
					console.log(res);
					console.log("获取当前定位失败");
				}
			})	
		},
		methods: {
			shijing(){
				uni.navigateTo({
					url:"/pages/emergencyRescue/emergencyRescue"
				})
			},
			my(){
				uni.navigateTo({
					url:"/pages/grzx/grzx"
				})
			},
			
			//跳转到团购
			tuanGouMore(){
				console.log("跳转到团购页面");
				uni.navigateTo({
					url:"/pages/tuangouyouhui/tuangouyouhui"
				})
			},
			
			tuangouDetail(){
			uni.navigateTo({
				url:"/pages/tuangouxiangqing/tuangouxiangqing"
			})	
			},
			
			// tabbar页面跳转

			//repair  车辆维修页面跳转
			repair() {
				console.log("跳转到车辆维修页面");
				uni.navigateTo({
					url: "/pages/clwx/yyxq"
				})
			},
			maintenance() {
				console.log("车辆保养");
				uni.navigateTo({
					url:"/pages/qiCheBaoYang/qiCheBaoYang"
				})
				
			},
			watch() {
				console.log("跳转到洗车界面");
				uni.navigateTo({
					url: "/pages/washCar/washCar"
				})
			},
			comeon() {
				console.log("跳转到就近加油");
				uni.navigateTo({
					url:"/pages/jiujinjiayou/jiujinjiayou"
				})
			},

			//刷新
			reflush() {
				this.nowCity();
			},
			//获取当前位置
			nowCity() {
				uni.request({
					url: 'https://elm.cangdu.org/v1/cities?type=guess', // 这里指定具体的URL
					method: 'GET',
					success: (res) => {
						// console.log(res.data);
						// console.log(res.data.name);
						this.nowName = res.data.name;
					},
					fail: (err) => {
						console.error(err);
					}
				});
			},

			//跳转选择城市页面
			handleClickIcon() {
				console.log("前置图标被点击了！！！");
				this.inputValue = '';
				uni.navigateTo({
					url: "/pages/local/local",
					data: this.inputValue
				})
			}

		}
	}
</script>

<style>
	.container {
		height: 1335rpx;
		width: 100%;
		background-color: #F7F7F7;
	}

	.custom-input-wrapper {

		position: relative;
		display: flex;
		align-items: center;
		/* 垂直居中 */
	}

	.custom-prepend-icon,
	.custom-append-icon {
		width: 20px;
		/* 根据需要调整 */
		height: 20px;
		/* 根据需要调整 */
		/* 其他样式，如外边距等 */
	}

	.custom-prepend-icon {
		margin-left: 20rpx;
	}

	.custom-append-icon {
		margin-left: 80rpx;
	}

	input[type="text"] {
		flex: 5;
		/* 占据剩余空间 */
	}



	.headsearch {
		background-color: #fff;
		width: 95%;
		height: 80rpx;
		line-height: 80rpx;
		margin: 20rpx 2.5%;
		border-radius: 40rpx;
		position: absolute;
		top: 80rpx;

		
	}
	
	.headsearch u--input {
		color: #000000;
	}

	.prepend-icon {
		background-color: #23ea23;
		z-index: 3;
	}

	.btns {
		overflow: hidden;
		width: 92%;
		height: 260rpx;
		border: solid 2rpx #ffffff;
		background-color: #ffffff;
		border-radius: 26rpx;
		margin: auto;
		position: relative;
		top: -100rpx;
	}

	.btn {
		float: left;
		/* background-color: #25ee25; */
		border-radius: 20rpx;
		width: 20%;
		height: 200rpx;
		border: solid 2rpx #ffffff;
		margin-left: 3.4%;
		margin-top: 30rpx;
		text-align: center;
		line-height: 80rpx;

	}

	.cars1,
	.cars2,
	.cars3,
	.cars4 {
		height: 120rpx;
		border-radius: 40rpx;
		border: solid 2rpx #ffffff;

	}

	.cars1 {
		background-image: linear-gradient(to right, rgb(69, 146, 247), rgb(80, 74, 244));
	}

	.cars2 {
		background-image: linear-gradient(to right, rgb(253, 197, 69), rgb(255, 164, 55));
	}

	.cars3 {
		background-image: linear-gradient(to right, rgb(175, 239, 73), rgb(66, 216, 43));
	}

	.cars4 {
		background-image: linear-gradient(to right, rgb(135, 194, 255), rgb(67, 139, 251));
	}

	.cars1 image {
		padding: 25rpx;
		padding-top: 35rpx;
		width: 84rpx;
		height: 50rpx;

	}

	.cars2 image,
	.cars3 image,
	.cars4 image {
		padding: 20rpx;
		width: 60rpx;
		height: 60rpx;
	}

	.map,
	.group {
		background-color: #ffffff;
		width: 92%;
		height: 550rpx;
		margin: auto;
		margin-top: 20rpx;
		border: 2rpx solid #ffffff;
		border-radius: 26rpx;
	}

	.map {
		position: relative;
		top: -100rpx;
	}

	.group {
		position: relative;
		top: -100rpx;
		margin-bottom: 80rpx;
		height: 680rpx;
	}

	.title {
		padding-top: 36rpx;
		padding-left: 16rpx;
	}

	.title2 {
		font-size: 20rpx;
		color: #D1D1D1;
		line-height: 60rpx;
	}

	map {
		position: relative;
		top: -30rpx;
	}

	.more {
		/* background-color: blue; */
		float: right;
		position: relative;
		top: -70rpx;
		right: 18rpx;
	}

	.all {
		position: relative;
		top: -40rpx;
		/* overflow: hidden; */
		float: left;
		width: 50%;
		/* background-color: #43ea43; */
	}

	.title {
		overflow: hidden;
	}

	.tuangou {
		float: left;
		/* box-sizing: border-box; */
		border: solid 2rpx #ffffff;
		margin-top: 20rpx;
		margin-left: 20rpx;
		/* background-color: #ea32ea; */
	}

	.tuangou image {
		width: 280rpx;
		height: 180rpx;
		border-radius: 24rpx;

	}

	.bottom {
		height: 200rpx;
		/* overflow: hidden; */
		position: fixed;
		bottom: -100rpx;
		width: 100%;
	}

	.two {
		height: 100rpx;
		background-image: url("/static/车联网服务-00首页_slices/矩形 12 拷贝.png");
	}

	.leftImg image,
	.centerImg image,
	.rightImg image {
		width: 44rpx;
		height: 46rpx;
	}

	.leftImg {
		float: left;
		position: relative;
		top: 25rpx;
		left: 18%;
	}

	.rightImg {
		float: left;
		position: relative;
		top: 25rpx;
		left: 55%;
	}

	.centerImg image {
		padding-top: 42rpx;
		padding-left: 49rpx;
	}

	.centerImg {
		width: 145rpx;
		height: 145rpx;
		background-color: #FF5C1B;
		float: left;
		position: relative;
		top: -64rpx;
		left: 34%;
		border-radius: 50%;

	}

	.null {
		height: 2rpx;
	}
	
</style>